<template>
  <div class="user-container">
    <!-- <van-nav-bar v-if="activeTab != 0" :title="title" :left-text="pathname == '/user'? '': '返回'" :left-arrow="pathname != '/user'" @click-left="onClickBack"/> -->
    <div class="user-content">
      <home-page v-if="activeTab == 0"></home-page>
      <order v-if="activeTab == 1"></order>
      <message v-if="activeTab == 2"></message>
      <my-center v-if="activeTab == 3"></my-center>
    </div>
    <van-tabbar @change="change" v-model="activeTab">
      <van-tabbar-item>
        <span :class="activeTab == 0?'red':'grey'">首页</span>
        <img
          slot="icon"
          :src="activeTab == 0 ? require('@/assets/img/btn_sy_Y.png') : require('@/assets/img/btn_sy_N.png')"
        >
      </van-tabbar-item>
      <van-tabbar-item>
        <span :class="activeTab == 1?'red':'grey'">订单</span>
        <img
          slot="icon"
          :src="activeTab == 1 ? require('@/assets/img/btn_dd_Y.png') : require('@/assets/img/btn_dd_N.png')"
        >
      </van-tabbar-item>
      <van-tabbar-item>
        <span :class="activeTab == 2?'red':'grey'">消息</span>
        <img
          slot="icon"
          :src="activeTab == 2 ? require('@/assets/img/btn_xx_y.png') : require('@/assets/img/btn_xx_N.png')"
        >
      </van-tabbar-item>
      <van-tabbar-item>
        <span :class="activeTab == 3?'red':'grey'">个人中心</span>
        <img
          slot="icon"
          :src="activeTab == 3 ? require('@/assets/img/btn_grzx_Y.png') : require('@/assets/img/btn_grzx_N.png')"
        >
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import HomePage from "./homePage.vue";
import MyCenter from "./myCenter.vue";
import Order from "./order.vue";
import Message from "./message.vue";
export default {
  components: {
    HomePage,
    MyCenter,
    Message,
    Order
  },
beforeRouteEnter(to, from, next) {
  next(vm => {
    if (vm.activeTab == 0 && (from.path == "/user/discount" || from.path == "/user/enshrine" || from.path == "/user/myOrder" || from.path == "/user/kefu")) {
      vm.activeTab = 3
    } else {
    }

  });
},
  data() {
    return {
      pathname: window.location.pathname,
      title: "首页",
      activeTab: 0,
      icon: {
        normal: "@/assets/img/btn_sy_Y.png",
        active: "@/assets/img/btn_sy_Y.png"
      }
    };
  },
  created() {
    let that = this;
    dsBridge.call("getClientId");
    dsBridge.register("getClientIdCallBack", function(data) {
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId:localStorage.getItem('userid'),
        cid:data
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/user/changeName", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    });
  },
  methods: {
    change() {
      if (this.activeTab == 0) {
        this.title = "首页";
      } else if (this.activeTab == 1) {
        this.title = "订单";
      } else if (this.activeTab == 2) {
        this.title = "消息";
      } else if (this.activeTab == 3) {
        this.title = "个人中心";
      }
    },
    onClickBack() {}
  },
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     if(localStorage.getItem("logintp") == "ride"){
  //       vm.$router.push({
  //         name: "home"
  //       });
  //     }else if(localStorage.getItem("logintp") == "shop"){
  //       vm.$router.push({
  //         name: "shop"
  //       });
  //     }else{
  //       vm.$router.push({
  //         name: "index"
  //       });
  //     }
  //     if (vm.activeTab == 0 && to.path == "/user") {
  //       vm.title = "首页";
  //     } else {
  //       vm.title = to.meta.title;
  //     }
  //     if (!localStorage.getItem("userid")) {
  //       vm.$router.push({
  //         name: "login"
  //       });
  //     }
  //     if (
  //       from.name == "enshrine" ||
  //       from.name == "discount" ||
  //       from.name == "myOrder" ||
  //       from.name == "businessman" ||
  //       from.name == "setUp" ||
  //       from.name == "newdis" ||
  //       from.name == "rider" ||
  //       from.name == "kefu"
  //     ) {
  //       vm.activeTab = 3;
  //     } else if (from.name == "messagedetail") {
  //       vm.activeTab = 2;
  //     } else if (from.name == "orderdetailing") {
  //       vm.activeTab = 1;
  //     }
  //   });
  // }
};
</script>
<style scoped>
.user-content {
  width: 100%;
  font-size: 0.3rem;
  z-index: 999;
}
.user-container {
  width: 100%;
  z-index: 999;
}
.grey {
  color: #8a8a8a;
}
.red {
  color: #ff2f4e;
}
</style>
